<template>
  <div class="box">
      <div class="top" v-if="nodes.cbTop==1">置顶</div>
      <router-link :to="'/forum/'+nodes.cbId" style="width:100%;height:100%;position:absolute"></router-link> 
      <p style="width:100%;height:20px; overflow: hidden;">{{nodes.cbName}}</p>
      
      <p style="padding:10px;width:100%;height:100px; overflow: hidden;font-size:13px;color:#6e6d6d">{{nodes.cbMess}}</p>
    <div class="bottom">
        <img :src="nodes.userHeader" alt="">
        <p style="padding:5px;color:#888;font-size:13px">{{nodes.userName}}</p>
    </div>
  </div>
</template>

<script>
export default {
    props:["nodes"]
}
</script>

<style scoped lang="less">
    .top{
        width: 50px;
        height: 20px;
        position: absolute;
        right: 0px;
        background: rgb(230, 174, 54);
        font-size: 12px;
        text-align: center;
    }
    .box{
        position: relative;
        translate: 100px 2s ;
        width: 30%;
        height: 190px;
        background: rgb(255, 255, 255);
        border-radius: 8px;
        // box-shadow: 5px 6px 3px -7px rgba(0, 0, 0, 0.85);
          box-shadow:  0 0 12px rgba(0,0,0,0.1);
        margin-top: 10px;
        padding: 10px;
        position: relative;
        .bottom{
            padding: 5px;
            width: 100%;
            height: 40px;
            display: flex;
            margin-top: 10px;
            img{
                width: 30px;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
   @keyframes myfirst
{
    to {transform: translateY(-20px);}
}
    .box:hover{
        animation: myfirst 0.5s forwards ;
        // background: rgb(182, 182, 182);
        box-shadow: 5px 6px 3px -7px rgba(0, 0, 0, 1);
        // box-shadow:  0 0 12px rgba(0,0,0,0.1);
    }
      @media  screen and (max-width: 1300px) {
          .box{
              width: 100% !important;
          }
      }
</style>